<script setup lang='ts'>
import { counterStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';


// const { count, addCount, cutCount } = counterStore()  // v3的仓库解构会失去响应式

const store = counterStore()  // v3的仓库解构会失去响应式
const router = useRouter()

</script>

<template>
    <div>
        <h1>全局计数器</h1>
        <div class="counter">
            <button @click="store.cutCount">-</button>
            <span>{{ store.count }}</span>
            <button @click="store.addCount">+</button>
        </div>
        <p>
            <button @click="router.push('/anothercounter')">去另外的测试页面</button>
        </p>
    </div>
</template>

<style scoped>
.counter {
    width: 100%;
    text-align: center;
    height: 400px;
    line-height: 400px;

}

.counter button,
.counter span {
    margin: 20px;
    width: 100px;
    height: 40px;
    font-size: 20px;
}
</style>